<script setup>
import { ref } from 'vue';
import RightClickMenu from '../components/RightClickMenu/RightClickMenu.vue';

const menuRef1 = ref(null);
const menuRef2 = ref(null);
const menuRef3 = ref(null);

// 基础菜单项配置
const basicMenuItems = [
  {
    id: 'copy',
    label: '复制',
    icon: 'icon-copy',
    handler: () => console.log('复制')
  },
  {
    id: 'paste',
    label: '粘贴',
    icon: 'icon-paste'
  },
  { divider: true },
  {
    id: 'delete',
    label: '删除',
    icon: 'icon-delete'
  }
];

// 带子菜单的配置
const nestedMenuItems = [
  {
    id: 'file',
    label: '文件',
    children: [
      {
        id: 'new',
        label: '新建',
        icon: 'icon-new'
      },
      {
        id: 'open',
        label: '打开',
        icon: 'icon-open'
      }
    ]
  },
  {
    id: 'edit',
    label: '编辑',
    children: [
      {
        id: 'copy',
        label: '复制',
        icon: 'icon-copy'
      },
      {
        id: 'paste',
        label: '粘贴',
        icon: 'icon-paste',
        disabled: true
      }
    ]
  }
];

// 自定义菜单项
const customMenuItems = [
  {
    id: 'share',
    label: '分享到',
    children: [
      {
        id: 'wechat',
        label: '微信',
        icon: 'icon-wechat'
      },
      {
        id: 'weibo',
        label: '微博',
        icon: 'icon-weibo'
      }
    ]
  },
  { divider: true },
  {
    id: 'delete',
    label: '删除',
    icon: 'icon-delete',
    disabled: true
  }
];

// 事件处理函数
const handleContextMenu1 = (event) => {
  event.preventDefault();
  menuRef1.value?.show(event);
};

const handleContextMenu2 = (event) => {
  event.preventDefault();
  menuRef2.value?.show(event);
};

const handleContextMenu3 = (event) => {
  event.preventDefault();
  menuRef3.value?.show(event);
};

const handleItemClick = (item) => {
  console.log('菜单项被点击:', item);
};

const handleContextMenuOpen = () => {
  console.log('右键菜单已打开');
};
</script>

<template>
  <div class="right-click-menu-demo">
    <h2>右键菜单示例</h2>
    
    <!-- 示例1：基础用法 -->
    <div class="demo-box"
         @contextmenu="handleContextMenu1">
      <h3>基础用法</h3>
      <p>在此区域右键点击查看基础菜单</p>
    </div>
    
    <!-- 示例2：多级菜单 + 深色主题 -->
    <div class="demo-box dark"
         @contextmenu="handleContextMenu2">
      <h3>多级菜单 + 深色主题</h3>
      <p>在此区域右键点击查看多级菜单</p>
    </div>
    
    <!-- 示例3：自定义样式 -->
    <div class="demo-box custom"
         @contextmenu="handleContextMenu3">
      <h3>自定义样式</h3>
      <p>在此区域右键点击查看自定义样式菜单</p>
    </div>

    <!-- 菜单组件 -->
    <RightClickMenu
      ref="menuRef1"
      :items="basicMenuItems"
      @item-click="handleItemClick"
    />
    
    <RightClickMenu
      ref="menuRef2"
      :items="nestedMenuItems"
      theme="dark"
      :show-icons="true"
      @item-click="handleItemClick"
      @contextmenu-open="handleContextMenuOpen"
    />
    
    <RightClickMenu
      ref="menuRef3"
      :items="customMenuItems"
      custom-class="custom-menu"
      :z-index="2000"
      :close-on-click="false"
      @item-click="handleItemClick"
    />
  </div>
</template>

<style scoped>
.right-click-menu-demo {
  padding: 20px;
}

.demo-box {
  margin: 20px;
  padding: 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f7fa;
  cursor: context-menu;
}

.demo-box h3 {
  margin: 0 0 15px 0;
  color: #333;
}

.demo-box p {
  margin: 0;
  color: #666;
}

/* 深色主题示例 */
.demo-box.dark {
  background: #303133;
  border-color: #606266;
}

.demo-box.dark h3,
.demo-box.dark p {
  color: #fff;
}

/* 自定义样式示例 */
.demo-box.custom {
  background: linear-gradient(135deg, #42d392 25%, #647eff);
  border: none;
}

.demo-box.custom h3,
.demo-box.custom p {
  color: #fff;
}

/* 自定义菜单样式 */
:deep(.custom-menu) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

:deep(.custom-menu .menu-item:hover) {
  background-color: #42d392;
  color: white;
}
</style>